import type { LocaleDropdownType } from '@/components/LocaleDropdown';
import { useLocalStorage } from '@vueuse/core';
import en from 'element-plus/es/locale/lang/en';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { defineStore } from 'pinia';
import { computed } from 'vue';
import { store } from '..';

type LangType = 'zh-CN' | 'en';

const elLocaleMap: Record<LangType, typeof zhCn | typeof en> = {
  'zh-CN': zhCn,
  en: en
};

export const useLocaleStore = defineStore('locales', () => {
  const lang = useLocalStorage<LangType>('lang', 'zh-CN');

  const currentLocale = computed<LocaleDropdownType>(() => ({
    lang: lang.value,
    elLocale: elLocaleMap[lang.value]
  }));

  // 固定数据，不需要响应式也可以放外边
  const localeMap: LocaleDropdownType[] = [
    { lang: 'zh-CN', name: '简体中文' },
    { lang: 'en', name: 'English' }
  ];

/**
 * 设置当前语言
 * @param {LocaleDropdownType} localeMap - 语言配置信息
 */
  const setCurrentLocale = (localeMap: LocaleDropdownType) => {
    lang.value = localeMap.lang;
  };

  return {
    lang,
    currentLocale,
    localeMap,
    setCurrentLocale
  };
});

export const useLocaleStoreWithOut = () => {
  return useLocaleStore(store);
};
